<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>

        .box {
            width: 200px;
            height: 200px;
            border: 1px solid #000;
            text-align: center;
            line-height: 200px;
            font-size: 50px;
            margin: 0 auto;
        }

        #btn {
            display: block;
            margin: 20px auto;
            width: 200px;
            height: 40px;
        }

    </style>

</head>
<body style="height: 2000px">
    <div class="box">10</div>
    <input type="button" value="开始" id="btn">
</body>
<script>
    var obox = document.querySelector(".box");
    var obtn = document.querySelector("#btn");

    let timer;
    obtn.onclick = function () {
        if (this.value === "复位") {
            obox.innerHTML = 10;
            this.value = "开始";
        } else if (this.value === "暂停") {
            clearInterval(timer);
            this.value = "继续";
        } else {
            start();
        }
    };

    function start() {
        console.log("开始了 start")
        timer = setInterval(
            function () {
                if (obox.innerHTML > 1) {
                    obtn.value = "暂停"
                }
                obox.innerHTML--;
                if (obox.innerHTML <= 1) {
                    clearInterval(timer);
                    obtn.value = "复位"
                    obox.innerHTML = "结束了";
                }
            }, 100
        );


    }


</script>
</html>



















